<template>
    <div class="bqDialog">
        <!-- 数据治理中间弹窗 -->

        <div class="sjzlTable" v-if="$store.state.sjzlCenterContent">
            <div class="closeDialog" @click="closeDialog">关闭</div>
            <div class="currTitle">
                {{ $store.state.sjzlCenterContent.name }}
            </div>
            <div class="sjbqdjhfTable">
                <table
                    class="ceTable"
                    border="1"
                    cellspacing="0"
                    cellpadding="0"
                >
                    <tr>
                        <th
                            v-for="(item, index) in $store.state
                                .sjzlCenterContent.ths"
                            :key="index"
                        >
                            {{ item }}
                        </th>
                    </tr>
                    <tr
                        v-for="(item, index) in $store.state.sjzlCenterContent
                            .tds"
                        :key="index"
                    >
                        <td :class="{ activeTr: item.total === '不可访问' }">
                            {{ item.name ? item.name : item.zy }}
                        </td>
                        <td :class="{ activeTr: item.total === '不可访问' }">
                            {{ item.bm ? item.bm : item.total }}
                        </td>
                        <td v-if="item.total1">{{ item.total1 }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import {
    defineComponent,
    getCurrentInstance,
    ref,
    watch,
    computed,
    nextTick,
} from "vue";
import { useStore } from "vuex";
import echarts from "echarts";
export default {
    setup() {
        const store = useStore();
        let tableData = ref(null);
        const closeDialog = () => {
            store.commit("changeSjzlCenterContent", null);
        };
        watch(
            () => store.state.sjzlCenterContent,
            (newVlaue) => {}
        );
        return {
            closeDialog,
        };
    },
};
</script>
<style scoped>
.sjbqdjhfTable::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.sjbqdjhfTable::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}
.sjbqdjhfTable::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
}
</style>
<style lang="stylus" scoped>
.bqDialog >>> .closeDialog {
    position: absolute;
    top: vh(40);
    right: vw1(40);
    width: vw1(50);
    height: vh(30);
    font-size: vw1(24);
    line-height: vh(30);
    cursor: pointer;
}

.bqDialog>div {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 3;
}

.bqDialog>>>th, .bqDialog>>>td {
    border: 1px solid #155e75;
}

.bqDialog>>>th {
    color: rgba(30, 212, 233, 1);
}

.bqDialog>>>.currTitle {
    width: 100%;
    height: vh(50);
    line-height: vh(70);
    font-size: vw1(24);
    text-align: center;
    margin-top: vh(10);
}

.bqDialog {
    .sjzlTable {
        width: vw1(1020);
        height: vh(656);
        background: url('/data/images/sjzl/center.png') no-repeat;
        background-size: 100% 100%;

        .sjbqdjhfTable {
            margin-top: vh(20);
            margin: vh(40);
            max-height: vh(550);
            overflow-y: scroll;

            table {
                width: 100%;
                max-height: vh(550);
                line-height: vh(40);
                text-align: center;
                border-width: 5px;
                border-color: #155e75;
                border-collapse: collapse;
                border-spacing: 0;

                tr:nth-child(1) {
                    height: vh(55);
                    line-height: vh(55);
                    font-size: vw1(24);

                    th:nth-child(1) {
                        width: vw1(136);
                        border: 1px solid #155e75;
                    }

                    th:nth-child(2) {
                        width: vw1(430);
                    }

                    th:nth-child(3) {
                        width: vw1(288);
                    }
                }

                tr {
                    color: #fff;
                    font-size: vw1(22);

                    td {
                        width: vw1(430);
                        height: vh(55);
                        line-height: vh(55);
                        text-align: center;
                    }

                    td.activeTr {
                        color: red;
                    }
                }
            }
        }
    }
}
</style>